<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="网站配置"
      :indent="20"
      :columns="columns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button
          type="primary"
          v-auth="'t.site.config.create'"
          :icon="CirclePlus"
          @click="openAddEdit('新增网站配置')"
        >
          新增
        </el-button>
        <el-button
          v-auth="'t.site.config.remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
        <el-button
          v-auth="'t.site.config.import'"
          type="primary"
          :icon="Upload"
          plain
          @click="importData"
        >
          导入
        </el-button>
        <el-button
          v-auth="'t.site.config.export'"
          type="primary"
          :icon="Download"
          plain
          @click="downloadFile"
        >
          导出
        </el-button>
      </template>
      <!-- userAvatar -->
      <template #userAvatar="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.userAvatar" fit="cover" />
      </template>
      <!-- touristAvatar -->
      <template #touristAvatar="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.touristAvatar" fit="cover" />
      </template>
      <!-- authorAvatar -->
      <template #authorAvatar="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.authorAvatar" fit="cover" />
      </template>
      <!-- articleCover -->
      <template #articleCover="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.articleCover" fit="cover" />
      </template>
        <!-- commentCheck -->
        <template #commentCheck="{ row }">
        <el-switch
          v-model="row.commentCheck"
          :active-text="row.commentCheck ? '启用' : '禁用'"
          :active-value="row.commentCheck"
          :inactive-value="!row.commentCheck"
          disabled
        />
      </template>
        <!-- messageCheck -->
        <template #messageCheck="{ row }">
        <el-switch
          v-model="row.messageCheck"
          :active-text="row.messageCheck ? '启用' : '禁用'"
          :active-value="row.messageCheck"
          :inactive-value="!row.messageCheck"
          disabled
        />
      </template>
        <!-- isReward -->
        <template #isReward="{ row }">
        <el-switch
          v-model="row.isReward"
          :active-text="row.isReward ? '启用' : '禁用'"
          :active-value="row.isReward"
          :inactive-value="!row.isReward"
          disabled
        />
      </template>
      <template #operation="{ row }">
        <el-button
          v-auth="'t.site.config.update'"
          type="primary"
          link
          :icon="EditPen"
          @click="openAddEdit('编辑网站配置', row, false)"
        >
          编辑
        </el-button>
        <el-button
          v-auth="'t.site.config.remove'"
          type="primary"
          link
          :icon="Delete"
          @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <TSiteConfigForm ref="tSiteConfigRef" />
    <ImportExcel ref="ImportExcelRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CirclePlus, Delete, EditPen, Upload, Download } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  createTSiteConfigApi,
  removeTSiteConfigApi,
  updateTSiteConfigApi,
  getTSiteConfigListApi,
  getTSiteConfigDetailApi,
  importTSiteConfigExcelApi,
  exportTSiteConfigExcelApi
} from '@/api/modules/tsiteconfig/tSiteConfig'
import { useHandleData } from '@/hooks/useHandleData'
import TSiteConfigForm from '@/views/tsiteconfig/tSiteConfig/components/TSiteConfigForm.vue'
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
import type { ITSiteConfig } from '@/api/interface/tsiteconfig/tSiteConfig'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { downloadTemplate } from '@/api/modules/system/common'
import { ElMessageBox } from 'element-plus'
import { useDownload } from '@/hooks/useDownload'
defineOptions({
  name: 'TSiteConfigView'
})
const proTableRef = ref<ProTableInstance>()
// 表格配置项
const columns: ColumnProps<ITSiteConfig.Row>[] = [
  { type: 'selection', width: 80 },
  { prop: 'userAvatar', label: '用户头像', width: 150 },
  { prop: 'touristAvatar', label: '游客头像', width: 150 },
  { prop: 'siteName', label: '网站名称', width: 150 },
  { prop: 'siteAddress', label: '网站地址', width: 150 },
  { prop: 'siteIntro', label: '网站简介', width: 150 },
  { prop: 'siteNotice', label: '网站公告', width: 150 },
  { prop: 'createSiteTime', label: '建站日期', width: 150 },
  { prop: 'recordNumber', label: '备案号', width: 150 },
  { prop: 'authorAvatar', label: '作者头像', width: 150 },
  { prop: 'siteAuthor', label: '网站作者', width: 150 },
  { prop: 'articleCover', label: '文章默认封面', width: 150 },
  { prop: 'aboutMe', label: '关于我', width: 150 },
  { prop: 'github', label: 'Github', width: 150 },
  { prop: 'gitee', label: 'Gitee', width: 150 },
  { prop: 'bilibili', label: '哔哩哔哩', width: 150 },
  { prop: 'qq', label: 'QQ',width: 120 },
  {
    prop: 'commentCheck',
    label: '是否评论审核 (0否 1是)',
    width: 150
  },
  { prop: 'messageCheck', label: '是否留言审核 (0否 1是)',width: 150 },
  { prop: 'isReward', label: '是否开启打赏 (0否 1是)',width: 150 },
  { prop: 'weiXinCode', label: '微信二维码',width: 150 },
  { prop: 'aliCode', label: '支付宝二维码',width: 150 },
  { prop: 'emailNotice', label: '是否邮箱通知 (0否 1是)',width: 150 },
  { prop: 'socialList', label: '社交列表',width: 150 },
  { prop: 'loginList', label: '登录方式',width: 150 },
  { prop: 'isMusic', label: '是否开启音乐播放器 (0否 1是)',width: 150 },
  { prop: 'musicId', label: '网易云歌单id',width: 150 },
  { prop: 'isChat', label: '是否开启聊天室 (0否 1是)',width: 150 },
  { prop: 'websocketUrl', label: 'websocket链接',width: 150 },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]
// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'userAvatar', label: '用户头像', el: 'input' },
  { prop: 'touristAvatar', label: '游客头像', el: 'input' },
  { prop: 'siteName', label: '网站名称', el: 'input' },
  { prop: 'siteAddress', label: '网站地址', el: 'input' },
  { prop: 'siteIntro', label: '网站简介', el: 'input' },
  { prop: 'siteNotice', label: '网站公告', el: 'input' },
  {
    prop: 'createSiteTime',
    label: '建站日期',
    el: 'date-picker',
    span: 2,
    props: {
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss'
    }
  },
  { prop: 'recordNumber', label: '备案号', el: 'input' },
  { prop: 'authorAvatar', label: '作者头像', el: 'input' },
  { prop: 'siteAuthor', label: '网站作者', el: 'input' },
  { prop: 'articleCover', label: '文章默认封面', el: 'input' },
  { prop: 'aboutMe', label: '关于我', el: 'input' },
  { prop: 'github', label: 'Github', el: 'input' },
  { prop: 'gitee', label: 'Gitee', el: 'input' },
  { prop: 'bilibili', label: '哔哩哔哩', el: 'input' },
  { prop: 'qq', label: 'QQ', el: 'input' },
  { prop: 'commentCheck', label: '是否评论审核 (0否 1是)', el: 'input' },
  { prop: 'messageCheck', label: '是否留言审核 (0否 1是)', el: 'input' },
  { prop: 'isReward', label: '是否开启打赏 (0否 1是)', el: 'input' },
  { prop: 'weiXinCode', label: '微信二维码', el: 'input' },
  { prop: 'aliCode', label: '支付宝二维码', el: 'input' },
  { prop: 'emailNotice', label: '是否邮箱通知 (0否 1是)', el: 'input' },
  { prop: 'socialList', label: '社交列表', el: 'input' },
  { prop: 'loginList', label: '登录方式', el: 'input' },
  { prop: 'isMusic', label: '是否开启音乐播放器 (0否 1是)', el: 'input' },
  { prop: 'musicId', label: '网易云歌单id', el: 'input' },
  { prop: 'isChat', label: '是否开启聊天室 (0否 1是)', el: 'input' },
  { prop: 'websocketUrl', label: 'websocket链接', el: 'input' }
]

// 获取table列表
const getTableList = async (params: ITSiteConfig.Query) => {
  let newParams = formatParams(params)
  return getTSiteConfigListApi(newParams)
}
const formatParams = (params: ITSiteConfig.Query) => {
  let newParams = JSON.parse(JSON.stringify(params))
  return newParams
}
// 打开 drawer(新增、查看、编辑)
const tSiteConfigRef = ref<InstanceType<typeof TSiteConfigForm>>()
const openAddEdit = async (title: string, row: any = {}, isAdd = true) => {
  if (!isAdd) {
    const record = await getTSiteConfigDetailApi({ id: row?.id })
    row = record?.data
  }
  const params = {
    title,
    row: { ...row },
    api: isAdd ? createTSiteConfigApi : updateTSiteConfigApi,
    getTableList: proTableRef.value?.getTableList
  }
  tSiteConfigRef.value?.acceptParams(params)
}
// 删除信息
const deleteInfo = async (params: ITSiteConfig.Row) => {
  await useHandleData(removeTSiteConfigApi, { ids: [params.id] }, `删除【${params.id}】网站配置`)
  proTableRef.value?.getTableList()
}
// 批量删除信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(removeTSiteConfigApi, { ids }, '删除所选网站配置')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}
// 导入
const ImportExcelRef = ref<InstanceType<typeof ImportExcel>>()
const importData = () => {
  const params = {
    title: '网站配置',
    templateName: '网站配置',
    tempApi: downloadTemplate,
    importApi: importTSiteConfigExcelApi,
    getTableList: proTableRef.value?.getTableList
  }
  ImportExcelRef.value?.acceptParams(params)
}
// 导出
const downloadFile = async () => {
  let newParams = formatParams(proTableRef.value?.searchParam as ITSiteConfig.Query)
  useDownload(exportTSiteConfigExcelApi, '网站配置', newParams)
}
</script>
